<template>
  <div class="addbook">
    <div class="box">
      <el-form :rules="rules" ref="myform" class="myform" :label-position="labelPosition" label-width="100px" :model="form">
        <el-form-item label="书名" prop="bookName">
          <el-input type="text" v-model="form.bookName"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="author">
          <el-input type="text" v-model="form.author"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input type="text" v-model="form.price"></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="pic">
          <Picture @getpicpath="getpicpath"></Picture>
        </el-form-item>
        <el-form-item label="简介" prop="detail">
          <el-input v-model="form.detail" type="textarea"></el-input>
        </el-form-item>
        <el-form-item>
          <p class="flex">
              <el-button type="primary" class="btn" @click="submitForm('myform')">添加</el-button>
              <el-button type="danger" class="btn" @click="resetForm('myform')">重置</el-button>
            </p>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { ref, toRefs, reactive, onMounted,computed } from "vue";
import Picture from "@/components/Picture.vue"
import {toast} from '@/utils'
import {ajax} from "@/api"
export default {
  components:{
    Picture
  },
  setup() {
    const myform = ref()
    const state = reactive({
      path:"",
      labelPosition: "right",
      form: {
        Borrow:false,
        pic:"",
        time:""
      },
      rules:{
        bookName:[
          {
            required:true,
            message:'书名未填写'
          }
        ],
        author:[
          {
            required:true,
            message:'作者名未填写'
          }
        ],
        price:[
          {
            required:true,
            message:'价格未填写'
          }
        ],
        detail:[
          {
            required:true,
            message:'简介为空'
          }
        ]
      }
    })
    const startUpload = ()=>{
      file.value.click()
    }
    const submitForm = ()=>{
      state.form.pic = state.path
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf = new Date().getMinutes() < 10? "0" + new Date().getMinutes(): new Date().getMinutes();
      let ss = new Date().getSeconds() < 10? "0" + new Date().getSeconds(): new Date().getSeconds();
      state.form.time = yy + "/" + mm + "/" + dd + " " + hh + ":" + mf + ":" + ss;
      myform.value.validate(async valid=>{
        if(valid){
          console.log(state.form)
          let res = await ajax.books(state.form)
          myform.value.resetFields()
        }else{
          toast.error('请输入完整的书籍信息')
        }
      })
    }
    const resetForm = ()=>{
      myform.value.resetFields()
    }
    const getpicpath = (value)=>{
      state.path = value
    }

    return {
      ...toRefs(state),
      myform,
      startUpload,
      resetForm,
      submitForm,
      getpicpath
    };
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__content{
  flex: none;
  width: 500px;
}
::v-deep .el-textarea__inner{
  min-height: 150px!important;
}
.addbook{
  width: 100%;
  height: 100%;
  .box{
    ::v-deep .el-form-item{
      justify-content: center;
    }
    .flex {
      display: flex;
      .btn {
        flex: 1;
      }
    }
    .spanfile{
      z-index: 10px;
    }
  }
}
</style>
